<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link href="http://jquerytools.org/media/css/tabs.css" type="text/css" rel="stylesheet">
</head>

<body>
<!--tab jq tools-->

<div class="detailstab" >

  <!-- the tabs -->
  <ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>

  <!-- tab "panes" -->
  <div class="pane">
    <p>#1</p>
    <!-- the tabs -->
<ul class="tabs">
  <li><a href="#">Tab 1</a></li>
  <li><a href="#">Tab 2</a></li>
  <li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="pane">First tab content.</div>
<div class="pane">Second tab content</div>
<div class="pane">Third tab content</div>

  </div>

  <div class="pane">
    <p>#2</p>
    <!-- the tabs -->
<ul class="tabs">
  <li><a href="#">Tab 1</a></li>
  <li><a href="#">Tab 2</a></li>
  <li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="pane">First tab content.</div>
<div class="pane">Second tab content</div>
<div class="pane">Third tab content</div>

  </div>

  <div class="pane">
    <p>#3</p>
    <!-- the tabs -->
<ul class="tabs">
  <li><a href="#">Tab 1</a></li>
  <li><a href="#">Tab 2</a></li>
  <li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="pane">First tab content.</div>
<div class="pane">Second tab content</div>
<div class="pane">Third tab content</div>

  </div>
</div>

<script>
  // perform JavaScript after the document is scriptable.
  $(function() {
      $("ul.tabs").tabs("> .pane");
    });
</script>
</body>
</html>
